<template>
  <div class="detail">
    <!-- 商品详情页 {{id}} -->
    <Mylogo>领取50元电影票</Mylogo>

    <!-- 等数据加载完在渲染 -->
    <div v-if="info.img" :style='{backgroundColor:info.backgroundColor}' class="main">

      <p class="top">猫眼电影&nbsp;>&nbsp;{{info.nm}}</p>
      <div class="con">
        <div class="imgbox">
          <img :src="info.img.replace(/\/w.h/, '/100.138')" alt="">
          <img :src="info.videourl" alt="">
        </div>
        <div class="title">
          <h2>{{info.nm}}</h2>
          <p>{{info.cat}}{{info.ver}}</p>
          <p>{{info.star}}</p>
          <p>{{info.pubDesc}}</p>
          <button>想看</button>
          <button>收藏</button>
        </div>
      </div>

      <!-- 猫眼评分 -->
      <div class="score">
        <div class="top"> 
          <img src="../assets/img/logo-new.png" alt="">
          <span>{{info.scoreLabel}}</span>
          <span>{{info.watched}}人看过</span>
          <span>{{info.wish}}想看</span>
        </div>
        <div class="scorem">
          <div class="left">
              <em>{{info.sc}}</em>
              <p>{{info.snum}}人评</p>
          </div>
          <div class="center">
            <dl v-for="item in info.distributions" :key="item.proportion">
              <dt>{{item.movieScoreLevel}}</dt>
              <dd><span :style="{width:item.proportion+'%'}"></span></dd>
            </dl>
          </div>
          <div class="right">
            {{info.src}}
          </div>
        </div>
      </div>
      <!-- {{item.proportion}} -->

      <!-- 简介 -->
      <div class="brief">
        <h2>简介</h2>
        <div>
          {{info.dra}} 
        </div>
      </div>
      <!-- 演职人员 -->

      <!-- 剧照 -->
      <div class="m-photo">
        <h2>剧照</h2>
       <ul>
         <li v-for="item in info.photos" :key="item">
           <img :src="item.replace(/\/w.h/, '/150.100')" alt="">
         </li>
       </ul>
      </div>
      
      <!-- 视频推荐 -->
    
     
    </div>
  </div>
</template>

<script>
import { mapState, mapActions } from "vuex";
import Mylogo from "@/components/home/Mylogo";
import Np from "nprogress";
export default {
  props: ["id"],
  components: {
    Mylogo
  },
  computed: mapState({ info: state => state.detail.detail }),
  methods: {
    ...mapActions(["getDetailAsc"])
  },

  // 考虑到当网速特别慢的时候 浏览器获取商品信息比较慢 页面会出现白屏情况
  // 有两种解决方式
  // 1.在数据请求完再跳转页面(导航完成之前获取)
  // 2.先跳转页面在等待请求的时候显示正在加载  导航完成之后获取

  beforeRouteEnter(to, from, next) {
    //   // 在渲染该组件的对应路由被 confirm 前调用
    //   // 不！能！获取组件实例 `this`
    //   // 因为当守卫执行前，组件实例还没被创建
    Np.start();
    next(vm => {
      vm.getDetailAsc({ id: to.params.id }).then(() => {
        Np.done();
      });
    });

    // fetch("http://www.pudge.wang:3080/api/movies/detail", {
    //   method: "POST",
    //   body: JSON.stringify({ id: to.params.id }),
    //   headers: new Headers({
    //     "Content-Type": "application/json"
    //   })
    // })
    //   .then(response => {
    //     Np.done();
    //     return response.json();
    //   })
    //   .then(res => {
    //     if (res.status === 0) {
    //       next(vm => {
    //         vm.info = res.result;
    //       });
    //     }
    //   });
  }
};
</script>

<style lang="less" scoped>
@import "../assets/css/var.less";
.detail {
  color: white;
  .main {
    text-align: left;
    padding: 20px 10px;
    .top {
      margin-bottom: 10px;
      color: #ccc;
      font-size: @s-size;
    }
    .con {
      display: flex;
      .title {
        width: 200px;
        margin-left: 20px;

        h2 {
          font-size: @xl-size;
          height: 30px;
          line-height: 30px;
          .ellipsis();
        }
        p {
          .ellipsis();
          height: 25px;
          line-height: 25px;
          font-size: @m-size;
          color: #ccc;
        }
        button {
          width: 80px;
          height: 30px;
          margin-right: 10px;
          font-size: @s-size;
        }
      }
    }
    .score {
      width: 350px;
      height: 100px;
      font-size: 12px;
      background-color: rgba(0, 0, 0, 0.18);
      border-radius: 16px;
      margin-top: 30px;
      padding: 10px;
      .top {
        width: 350px;
        .ellipsis();
        img {
          width: 20px;
          height: 20px;
          vertical-align: middle;
        }
        span {
          margin-right: 15px;
        }
      }
      .scorem {
        display: flex;
        .left {
          margin: 0 5px;
          em {
            font-size: 30px;
            color: #ffb400;
            margin-left: 20px;
          }
        }
        .center {
          margin-left: 10px;
          dl {
            margin: 5px 0;
            height: 13px;
            line-height: 13px;
          }
          dt {
            width: 50px;
          }
          dd {
            width: 100px;
            height: 8px;
            background-color: rgba(0, 0, 0, 0.2);
            border-radius: 10px;
            overflow: hidden;
            position: relative;
            span {
              position: absolute;

              background-color: #fff;
              height: 100%;
            }
          }
        }
        .right {
          border: 1px solid #b49c70;
          width: 100px;
          height: 40px;
          text-align: center;
          line-height: 40px;
          border-radius: 10px;
          margin-left: 10px;
        }
      }
      dl {
        display: flex;
      }
    }
    .brief {
      h2 {
        margin: 30px 0 20px;
      }
      div {
        font-size: @m-size;
        color: #ccc;
        line-height: 20px;
      }
    }
    .m-photo {
      h2 {
        margin: 30px 0 20px;
      }
      ul {
        display: flex;
        overflow: auto;
        li {
          flex: 1;
          img {
            margin: 0 5px;
            width: 150px;
            height: 100px;
          }
        }
      }
    }
  }
}
</style>
